<template>
  <view class="my-search-container">
    <!-- 全选 -->
    <label class="radio">
      <radio color="#C00000" :checked="isFullcheck" @click="changeAllState"/><text>全选</text>
    </label>
    <!-- 合计 -->
    <view class="amount-box">
      合计：<text class="amount">￥{{checkedGoodsAmount}}</text>
    </view>
    <!-- 结算按钮 -->
    <view class="btn-settle" @click="settlement">结算({{checkedCount}})</view>
  </view>
</template>

<script>
  import {mapGetters,mapMutations,mapState} from 'vuex'
  export default {
    name:"my-settle",
    data() {
      return {
        // 倒计时的秒数
        seconds:3,
        // 定时器的 Id
        timer:null
      };
    },
    computed:{
      ...mapGetters('m_cart',['checkedCount','total','checkedGoodsAmount']),
      // 使用mapGetters辅助函数，从m_user模块中将 addstr 映射到当前组件中使用：
      ...mapGetters('m_user',['addstr']),
      // 使用mapState辅助函数，从m_user模块中将 token 映射到当前组件中使用：
      ...mapState('m_user',['token']),
      // 判断是否全选，购物车所有的商品与已勾选的商品是否相等，
      isFullcheck(){
        return this.total === this.checkedCount;
      },
    },
    
    methods:{
      // 使用mapMutations辅助函数，把m_cart模块提供的 updateAllGoodsState 方法映射到当前的组件中使用，
      ...mapMutations('m_cart',['updateAllGoodsState']),
      // 把 m_user 模块中的 updateRedirectInfo 方法映射到当前页面中使用，
      ...mapMutations('m_user',['updateRedirectInfo']),
      changeAllState(){
        // 修改购物车中所有商品的选中状态
        // console.log(!this.isFullcheck)
        // !this.isFullcheck 表示：当前全选按钮的状态取反之后，就是最新的勾选状态，
        this.updateAllGoodsState(!this.isFullcheck);
      },
      // 用户点击了结算按钮
      settlement(){
        // 1.先判断是否勾选了要结算的商品，
        if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品！');
        // 2.再判断用户是否选择了收货地址
        if (!this.addstr) return uni.$showMsg('请选择收货地址！');
        // 3.最后判断用户是否登录了，如果没有登陆，则调用delayNavigate() 进行倒计时的导航跳转
        // if (!this.token) return uni.$showMsg('请先登录！');
        if(!this.token) return this.delayNavigate();
      },
      // 延时导航到my页面
      delayNavigate(){
        // 把 data 中的秒数重置成3秒，
        this.seconds = 3;
        this.showTips(this.seconds);
        // 1.将定时器的 Id 存储到 timer 中
        this.timer = setInterval(()=>{
          this.seconds--;
          
          //2.判断秒数是否 <=0 
          if(this.seconds <= 0){
            // 2.1 清楚定时器
            clearInterval(this.timer);
            // 2.2 跳转到my页面
            uni.switchTab({
              url:'/pages/my/my',
              // 跳转成功之后执行的回调函数，
              success:() => {
                // 使用vuex 的 updateRedirectInfo 方法，把跳转信息存储到 Store 中，
                this.updateRedirectInfo({
                  // 跳转的方式，
                  openType:'switchTab',
                  // 从哪个页面跳转过去的
                  from:'/pages/cart/cart'
                })
              }
            });
            // 2.3终止后续代码的运行（当秒数为0时，不再展示 toast提示消息）
            return 
          }
     
          this.showTips(this.seconds);
        },1000)
      },
      // 展示倒计时的提示消息
      showTips(n){
        // 调用 uni.showToast() 方法，展示提示消息
        uni.showToast({
          // 不展示任何图标
          icon:'none',
          // 提示的消息
          title:'请登录后再结算！' + n + '秒之后自动跳转到登录页',
          // 为页面添加透明遮罩，防止点击穿透
          mask:true,
          // 1.5秒后弹窗消失时间
          duration:1500,
        })
      },
    },
    
  }
</script>

<style lang="scss">
  .my-search-container{
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100rpx;
    background: #fff;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    padding: 0px 10rpx;
    .radio{
      display: flex;
      align-items: center;
    }
    .amount-box{
      .amount{
        color: #C00000;
        font-weight: bold;
      }
    }
    .btn-settle{
      background: #C00000;
      color: #fff;
      height: 100%;
      min-width: 200rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0px 24rpx
    }
  }
</style>